<template>
  <div>
    <el-dialog
      width="800px"
      :title="$t('修改')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('图片')">
              <el-image
                style="width: 100px; height: 100px; object-fit: cover; border: #dfe4ed solid 1px; border-radius: 8px"
                lazy
                class="goods-img-mini"
                :src="form.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购厂家">
              <el-select style="width: 100%" filterable v-model="form.manufacturersName" :placeholder="$t('请选择')">
                <el-option
                  v-for="item in manufacturersList"
                  :key="item.id"
                  :label="item.manufacturersName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="采购类型" prop="type">
              <el-select style="width: 100%" v-model="form.type">
                <el-option label="国内采购" :value="1" />
                <el-option label="酒水采购" :value="2" />
                <el-option label="日本当地采购" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="sku">
              <el-input disabled v-model="form.skuNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 库位号 -->
            <el-form-item :label="$t('库位号')">
              <el-input disabled v-model="form.spNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="中文名">
              <el-input disabled v-model="form.skuNameCn" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 库位号 -->
            <el-form-item :label="$t('日文名')">
              <el-input disabled v-model="form.skuNameJp" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('采购数量')" prop="num">
              <el-input-number
                @change="setInfo"
                style="width: 100%"
                v-model="form.num"
                controls-position="right"
                :precision="0"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('采购总价')" prop="payPrice">
              <el-input
                type="number"
                @change="setInfo"
                style="width: 100%"
                :placeholder="$t('请输入')"
                v-model="form.payPrice"
              >
                <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                <el-button slot="append">
                  <el-select style="width: 100px" v-model="form.payPriceUnit" disabled>
                    <el-option label="RMB" :value="1" />
                    <el-option label="JPY" :value="2" />
                    <el-option label="USD" :value="3" />
                  </el-select>
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('采购单价')">
              <el-input disabled type="number" style="width: 100%" :placeholder="$t('请输入')" v-model="form.webPrice1">
                <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                <el-button slot="append">
                  <el-select disabled style="width: 100px" v-model="form.payPriceUnit">
                    <el-option label="RMB" :value="1" />
                    <el-option label="JPY" :value="2" />
                    <el-option label="USD" :value="3" />
                  </el-select>
                </el-button>
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('日元总价')">
              <el-input
                disabled
                type="number"
                style="width: 100%"
                :placeholder="$t('请输入')"
                v-model="form.skuTotalValue"
              >
                <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                <!-- <el-button slot="append">
                  <el-select disabled style="width: 100px" v-model="form.skuUnitPriceUnit">
                    <el-option label="RMB" :value="1" />
                    <el-option label="JPY" :value="2" />
                    <el-option label="USD" :value="3" />
                  </el-select>
                </el-button> -->
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('日元单价')">
              <el-input
                disabled
                type="number"
                style="width: 100%"
                :placeholder="$t('请输入')"
                v-model="form.skuUnitPrice"
              >
                <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                <!-- <el-button slot="append">
                  <el-select disabled style="width: 100px" v-model="form.skuUnitPriceUnit">
                    <el-option label="RMB" :value="1" />
                    <el-option label="JPY" :value="2" />
                    <el-option label="USD" :value="3" />
                  </el-select>
                </el-button> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('汇率')">
              <el-input
                disabled
                type="number"
                style="width: 100%"
                :placeholder="$t('请输入')"
                v-model="form.conversionRate"
              >
              </el-input>
            </el-form-item>
            <!-- 备注 -->
            <el-form-item :label="$t('备注')">
              <el-input type="textarea" :rows="6" v-model="form.purchaseRemark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="handleSubmit" type="primary" v-hasPermi="['distribution:purchase:updateDisPurchase']">
          {{ $t('确认') }}
        </el-button>
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPurchaseInfo,
  getConversionRateList,
  updateDisPurchase,
  getManufacturersByDis,
} from '@/api/purchasingManage/manufacturerPurchaseOrder'
export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**汇率 */
      exchangeRate: '',
      /**汇率列表 */
      exchangeRateList: [],
      manufacturersList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        key1: [{ required: true, message: this.$t('请输入'), trigger: 'blur' }],
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        Object.keys(this.form).forEach((key) => (this.form[key] = ''))
        this.getExchangeRate()
        getManufacturersByDis().then((res) => (this.manufacturersList = res.data))
      }
    },
  },
  methods: {
    /**获取汇率 */
    getExchangeRate() {
      getConversionRateList().then((res) => {
        this.exchangeRateList = res.data
        const cnRate = res.data?.filter((i) => i.baseCode == 'CNY')
        this.exchangeRate = cnRate[0].conversionRate
        this.getList()
      })
    },

    /*计算价格**/
    setInfo() {
      // 汇率
      const conversionRate = this.form.conversionRate
      // 采购数量
      const num = this.form.num
      // 采购总价
      const payPrice = this.form.payPrice



      // 单价两位，日元整数，按强制修改里面来，强制修改里面就有

      // 采购单价
      this.form.webPrice1 = +(payPrice / num).toFixed(2)
      // 日元总价
      this.form.skuTotalValue = (+payPrice * conversionRate).toFixed()
      // 日元单价
      this.form.skuUnitPrice = +(this.form.skuTotalValue / num).toFixed()
    },
    getList() {
      getPurchaseInfo(this.formData.id).then((res) => {
        this.form = JSON.parse(JSON.stringify(res.data))

        const payPriceUnit = this.form.payPriceUnit

        let exchangeRate

        // 付款总价单位 1-RMB 2-JPY 3-USD
        if (payPriceUnit == 1) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'CNY')
          exchangeRate = rate[0].conversionRate
        }
        if (payPriceUnit == 2) {
          exchangeRate = 1
        }
        if (payPriceUnit == 3) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'USD')
          exchangeRate = rate[0].conversionRate
        }
        this.form.exchangeRate = exchangeRate
        //
        this.setInfo()
      })
    },

    handleSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          updateDisPurchase(this.form).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.$emit('getList')
              this.cancel()
            }
          })
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
